﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<h3 style="text-align:center">登录页面</h3>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>

    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <style>
        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }
    </style>
    <form class="layui-form">


        <div class="demo-login-container">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="email" value="" id="email" lay-verify="required" placeholder="请输入QQ邮箱" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon "></i>
                    </div>
                    <input type="text" name="code" lay-verify="required" id="code" placeholder="请输入验证码" autocomplete="off" class="layui-input" lay-affix="eye">
                    <input type="button" id="helpcode" class="sendCodeBtn" value="发送验证码" />
                </div>
            </div>


            <div class="layui-form-item">
                <a href="#" id="useAccount">账号密码登录</a>  <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login" lay-on="msg" onclick="GetLogin()">登录</button>
            </div>


        </div>
    </form>
    <script>
        document.getElementById('useAccount').addEventListener('click', function (e) {
            e.preventDefault(); // 阻止链接默认行为
            window.location.href = '/Users/LoginIndex'; // 重定向到账号密码验证页面
        });
    </script>
    <script>
        var seconds = 60;
        var $ = layui.jquery;
        //发送验证码所触发的事件
        document.getElementById('helpcode').addEventListener('click', function () {
            var email_r = $("#email").val();
            if (email_r == "") {
                alert("请输入邮箱");
                return;
            }
            this.disabled = true;
            var countdown = setInterval(function () {
                seconds = seconds - 1;
                this.value = "(" + seconds + "s)后重新发送";
                if (seconds <= 0) {
                    clearInterval(countdown);
                    this.value = "发送验证码";
                    this.disabled = false;
                }
            }.bind(this), 1000);

            //接收验证码
            $.post({
                url: '@ViewBag.Darius'+"/api/Email/Code?email_r=" + $("#email").val(),
                // data: JSON.stringify(data),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    console.log(res);
                    
                }
            })

            ///添加验证码和邮箱
         
            var data={
                email: $("#email").val(),
                code:$("#code").val(),
            }
            console.log(JSON.stringify(data));
            $.post({
                url: '@ViewBag.Darius' + "/api/Email/AddEmail",
                data: JSON.stringify(data),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    console.log(res);                    
                }
            })

        });

        function GetLogin() {
            var email = $("#email").val();
            var code = $("#code").val();
            if (email == "") {
                alert("请输入邮箱");
                return;
            }
            if (code == "") {
                alert("请输入验证码");
                return;
            }
            var data = {
                email: email,
                code: code,
            }
            console.log(data);
            $.post({
                url: '@ViewBag.Darius' + "/api/Email/EmailLogin",
                data: JSON.stringify(data),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    console.log(res);
                    if (res.code == 1) {
                        layer.msg(res.messege, { icon: 1 })
                        window.location.href = "/Users/MenuView";
                        localStorage["username"] = $("#email").val();
                    } else if (res.code == -1) {
                        layer.msg(res.messege, { icon: 2 })
                    } else if (res.code == -2) {
                        layer.msg(res.messege, { icon: 3 })
                    } else {
                        layer.msg(res.messege, { icon: 4 })
                    }
                }
            })
        }
    </script>
</body>
</html>


